<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/4/22
  Time: 16:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/css/font-awesome.min93e3.css" rel="stylesheet">
    <link href="/static/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="/static/css/plugins/jsTree/style.min.css" rel="stylesheet">
</head>
<body>
<div style="padding: 10px 20px">


    <h3 class="m-t-none m-b">选择分组</h3>
    <form role="form">
        <div class="form-group">
            <div id="jstree1"></div>
        </div>
    </form>


</div>
</body>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script src="/static/js/content.min.js"></script>
<script src="/static/js/plugins/jsTree/jstree.min.js"></script>
<script src="/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>


    //        jstree
    $(document).ready(function () {
        /**
         * 获取分组的树
         * @type {Array}
         */
        var ss = [];
        $.ajax({
            url: '/area',
            type: 'GET',
            dataType: "json",
            success: function (result) {
                var jis = 0;
                for (var i = 0; i < result.data.length; i++) {
                    jis++;
                    if (result.data[i].parent == 0) {
                        result.data[i].parent = "#";
                    }
                    ss[i] = new Object();
                    ss[i].id = result.data[i].id;
                    ss[i].parent = result.data[i].parent;
                    ss[i].text = result.data[i].name;
                    ss[i].type = result.data[i].type;
                }
                ss[jis] = new Object();
                ss[jis].id = 0;
                ss[jis].parent = "#";
                ss[jis].text = "未分组";
                ss[jis].type = 1;
                $('#jstree1').jstree({
                    'core': {
                        'data': ss
                    },
                    "sort": false,
                    "plugins": ["types", "wholerow"],
                    "types": {
                        "default": {"icon": "fa fa-folder"},
                        "file": {"icon": "fa fa-file"}
                    }
                });

                $('#jstree1').on("changed.jstree", function (e, data) {
                    if (data.node.original.type == 3 || data.instance.get_selected(true)[0].text == "未分组") {
                        var ids=[];
//                        $(".form-group").attr("id",data.selected[0]);
                        $(".form-group").attr("name",data.instance.get_selected(true)[0].text);
                        ids[0] = new Object();
                        ids[0].id= data.selected[0] ;
                        ids[0].type =0;
                        for (var i = 1; i<data.node.parents.length+1;i++){
                            if (data.node.parents[i-1]!="#"){
                                ids[i] = new Object();
                                ids[i].id=  data.node.parents[i-1];
                                ids[i].type = i;
                            }
                        }
                        $("#jstree1").data("ids",ids);
                    }
                    else {
                        layer.msg('请选择加盟商', {icon: 5, time: 1000});
                    }

//                    console.log(data.node.original.type);
//                    console.log(data.instance.get_selected(true)[0].text);
//                    console.log(data.instance.get_node(data.selected[0]).text);
                });
            }
        });

    })
    function getIds() {
     return   $("#jstree1").data("ids");
    }
</script>
</html>
